<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Chained comboboxes demo</title>
<script language="JavaScript" type="text/javascript" src="jquery.js"></script>
<script language="JavaScript" type="text/javascript" src="jquery.chainedSelects.js"></script>
<script language="JavaScript" type="text/javascript">
$(function()
{
	$('#country').chainSelect('#state','combobox.php',
	{ 
		before:function (target) //before request hide the target combobox and display the loading message
		{ 
			$("#loading").css("display","block");
			$(target).css("display","none");
		},
		after:function (target) //after request show the target combobox and hide the loading message
		{ 
			$("#loading").css("display","none");
			$(target).css("display","inline");
		}
	});
	$('#state').chainSelect('#city','combobox.php',
	{ 
		before:function (target) 
		{ 
			$("#loading").css("display","block");
			$(target).css("display","none");
		},
		after:function (target) 
		{ 
			$("#loading").css("display","none");
			$(target).css("display","inline");
		}
	});
});
</script>
<style>
#loading
{
	position:absolute;
	top:0px;
	right:0px;
	background:#ff0000;
	color:#fff;
	font-size:14px;
	font-familly:Arial;
	padding:2px;
	display:none;
}
</style>
</head>
<body>

<div id="loading">Loading ...</div>

<h1>Chained select demo</h1>

<form name="formname" method="post" action="">
	<!-- country combobox -->
	<select id="country" name="country">
	<option value="1" selected>France</option>
	<option value="2">Romania</option>
	<option value="3">Usa</option>
	<option value="4">Brazil</option>
	</select>
	<!-- state combobox is chained by country combobox-->
	<select name="state" id="state" style="display:none"></select>
	<!-- city combobox is chained by state combobox-->
	<select name="city" id="city" style="display:none"></select>
</form>
